<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.number" placeholder="款号" @keyup.enter.native="searchBtn" clearable size="small"
                              style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.factory_name" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                               :remote-method="searchFactoryBtn" clearable :disabled="user.source_from == 'gc'">
                        <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="loading">
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small" stripe>
                <el-table-column prop="img" label="图片" width="100">
                    <template slot-scope="{ row }">
                        <el-image :src="row.thumb_images" fit="scale-down" :preview-src-list="[row.thumb_images]" style="height: 100px;">
                            <div slot="error" class="image-slot">
                                <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="款名" width="250" show-overflow-tooltip></el-table-column>
                <el-table-column prop="number" label="款号" width="150">
                    <template slot-scope="{ row }">
                        <a @click="linkTo(row.number)" class="el-icon-folder-opened" style="color: #409eff">
                            {{row.number}}
                        </a>
                    </template>
                </el-table-column>
                <el-table-column prop="f12_short" label="加工厂" width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-select v-if="editVisible && scope.$index == selectIndex" v-model="editForm.f12_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                                   :remote-method="searchFactoryBtn" @change="factoryChangeBtn($event, 'f12')" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==1" :label="item.factory_name_jiancheng" :value="item.factory_name_jiancheng" :key="index"></el-option>
                        </el-select>
                        <span v-else>{{scope.row.f12_short}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="p12_short" label="加工厂(配饰)" width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-select v-if="editVisible && scope.$index == selectIndex" v-model="editForm.p12_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                                   :remote-method="searchFactoryBtn" @change="factoryChangeBtn($event, 'p12')" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==1" :label="item.factory_name_jiancheng" :value="item.factory_name_jiancheng" :key="index"></el-option>
                        </el-select>
                        <span v-else>{{scope.row.p12_short}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="f8_short" label="绣花厂" width="200" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-select v-if="editVisible && scope.$index == selectIndex" v-model="editForm.f8_short" filterable remote placeholder="输入搜索的工厂名称" size="small" style="width: 100%"
                                   :remote-method="searchFactoryBtn" @change="factoryChangeBtn($event, 'f8')" clearable>
                            <el-option v-for="(item,index) in factoryList" v-if="item.group==2" :label="item.factory_name_jiancheng" :value="item.factory_name_jiancheng" :key="index"></el-option>
                        </el-select>
                        <span v-else>{{scope.row.f8_short}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="f9_short" label="印花厂" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="f10_short" label="烫金厂" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="f11_short" label="印金厂" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="140" v-if="user.source_from=='fs'">
                    <template slot-scope="scope">
                        <template v-if="selectIndex == scope.$index && editVisible">
                            <el-button type="text" class="el-icon-check" size="small" @click="saveBtn">
                                保存
                            </el-button>
                            <el-button type="text" class="el-icon-close" size="small" @click="cancelBtn">
                                取消
                            </el-button>
                        </template>
                        <el-button v-else type="text" size="small" class="el-icon-edit" @click="editBtn(scope.$index, scope.row)" :disabled="!(nodeActions.includes('edit'))">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>

import {factoryPreList, factoryList, factoryPreSave} from "../../api/produce/factory";

export default {
    name: "produce_factoryPre",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {number: "",factory_name: ""},
            factoryList: [],

            editVisible: false,
            editForm: {
                f12_id: "",
                f12: "",
                f12_short: "",
                f8_id: "",
                f8: "",
                f8_short: "",
            },

        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
        if(this.user.source_from == 'gc'){//用户来源：工厂
            this.form.factory_name = this.user.factory_name;
        }
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 200, factory_name: name, status: 0, tab: "1,2"}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            if(this.form.number){
                param.number = this.form.number;
            }
            if(this.form.factory_name){
                param.factory_name = this.form.factory_name;
            }
            this.editVisible = false;
            this.loading = true;
            factoryPreList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        linkTo(typeNo){
            this.$router.push({
                name: "pages_designEd",
                params: {id: typeNo, isEdit: 0}
            })
        },
        editBtn(index, row){
            this.editForm = {
                style_id: row.id,
                f12_id: row.f12_id,
                f12: row.f12,
                f12_short: row.f12_short,
                p12_id: row.p12_id,
                p12_short: row.p12_short,
                f8_id: row.f8_id,
                f8_short: row.f8_short
            };
            this.selectIndex = index;
            this.editVisible = true;
        },
        cancelBtn(){
            this.editVisible = false;
        },
        factoryChangeBtn(val, column){
            this.factoryList.forEach(item => {
                if(column == 'f8' && item.factory_name_jiancheng == val){
                    this.editForm.f8_id = item.id;
                }
                if(column == 'f12' && item.factory_name_jiancheng == val){
                    this.editForm.f12_id = item.id;
                    this.editForm.f12 = item.factory_name;
                }
                if(column == 'p12' && item.factory_name_jiancheng == val){
                    this.editForm.p12_id = item.id;
                }
            })
        },
        saveBtn(){
            let obj = {
                data: JSON.stringify(this.editForm)
            }
            this.loading = true;
            factoryPreSave(obj).then((res) => {
                this.loading =false;
                if(res.code === 0){
                    this.$message.success("设置成功");
                    let obj = this.data[this.selectIndex];
                    obj = Object.assign(obj, res.data);
                    this.$set(this.data, this.selectIndex, obj);
                    this.editVisible = false;
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() => {
                this.loading = false;
            })

        }
    },
    mounted() {
        this.searchBtn();
        this.getFactoryData("");
    }
}
</script>

<style scoped>
.el-image /deep/ .el-icon-circle-close:before{
    color: white;
}
</style>
